<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/bootstrap.min.css">
    <script src="/jquery-3.5.1.min.js"></script>
    <script src="/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="mytable">
    </div>

<script>
    $.ajax({
        url:"/teacher/findAll",
        type:"GET"
    }).done((res)=>{
        console.log(res);
        var html = "<table class='table'>";
        html+="<thead>";
        html+="<tr>";
        html+="<th>";
        html+="教师姓名";
        html+="</th>";

        html+="<th>";
        html+="教师性别";
        html+="</th>";

        html+="<th>";
        html+="教师年龄";
        html+="</th>";

        html+="<th>";
        html+="教师所教科目";
        html+="</th>";
        html+="</tr>";
        html+="</thead>";
        for(var i=0;i<res.length;i++){
            html+="<tr>";

            html+="<td>";
            html+=res[i].name;
            html+="</td>";

            html+="<td>";
            html+=res[i].sex;
            html+="</td>";

            html+="<td>";
            html+=res[i].age;
            html+="</td>";

            html+="<td>";
            html+=res[i].pos;
            html+="</td>";

            html+="</tr>";
        }
        $("#mytable").html(html);
    });
</script>
</body>
</html>